<style lang="less">
</style>
<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row>
            <Form
              ref="searchForm"
              :model="searchForm"
              inline
              :label-width="90"
              @submit.native.prevent
              class="search-form"
            >
              <!-- <FormItem label="查岗时间">
                <Row>
                  <Col span="11">
                    <DatePicker
                      type="date"
                      placeholder="开始时间"
                      format="yyyy-MM-dd"
                      v-model="searchForm.start"
                    ></DatePicker>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                    <DatePicker
                      type="date"
                      placeholder="结束时间"
                      format="yyyy-MM-dd"
                      v-model="searchForm.end"
                    ></DatePicker>
                  </Col>
                </Row>
              </FormItem>-->
              <Form-item label="订单号" prop="orderNum">
                <Input
                  type="text"
                  v-model="searchForm.orderNum"
                  clearable
                  placeholder="请输入订单号"
                  style="width: 200px"
                />
              </Form-item>
              <Form-item style="margin-left:-35px;" class="br">
                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                <Button @click="handleReset">重置</Button>
              </Form-item>
            </Form>
          </Row>
          <Row class="operation">
            <Button @click="add" v-has="'add'" type="primary" icon="md-add">添加运营商</Button>
          </Row>
          <Row>
            <Table
              :loading="loading"
              border
              :columns="columns"
              :data="data"
              sortable="custom"
              @on-sort-change="changeSort"
              @on-selection-change="showSelect"
              ref="table"
            ></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
            <Page
              :current="searchForm.current"
              :total="total"
              :page-size="searchForm.size"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :page-size-opts="[10,20,50,100]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getOrderPageList } from "@/api/operate";
import util from "@/libs/util.js";
import { getPayStatus, getPayStatusColor } from "@/libs/dict";
export default {
  name: "order",
  components: {},
  data() {
    return {
      loading: true,
      searchForm: {
        orderNum: "",
        current: 1,
        size: 20
      },
      submitLoading: false,
      columns: [
        {
          title: "序号",
          type: "index",
          width: 65,
          align: "center",
          fixed: "left"
        },
        {
          title: "订单号",
          key: "orderNum",
          minWidth: 100,
          align: "center",
          fixed: "left"
        },
        {
          title: "IMEI",
          key: "imei",
          minWidth: 130,
          align: "center",
          fixed: "center"
        },
        {
          title: "有效天数",
          key: "validDay",
          minWidth: 120,
          align: "center",
          fixed: "center"
        },
        {
          title: "价格",
          key: "vipPrice",
          minWidth: 130,
          align: "center",
          fixed: "center"
        },
        {
          title: "折扣",
          key: "discount",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          title: "vip模板名称",
          key: "vipName",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          title: "vip开始时间",
          key: "vipStart",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          title: "vip结束时间",
          key: "vipEnd",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          align: "center",
          minWidth: 140,
          title: "支付状态",
          key: "payStatus",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  color: this.payStatusColorFormat(row.payStatus)
                }
              },
              this.payStatusFormat(row.payStatus)
            );
          }
        },
        {
          title: "订单时间",
          key: "orderTime",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          title: "实际付款价格",
          key: "payCash",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          align: "center",
          minWidth: 140,
          title: "支付方式",
          key: "payMethod",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Tag",
              {
                props: {
                  color: this.payMethodColorFormat(row.payMethod)
                }
              },
              this.payMethodFormat(row.payMethod)
            );
          }
        },
        {
          title: "支付完成时间",
          key: "payTime",
          align: "center",
          fixed: "center",
          minWidth: 150
        },
        {
          title: "付款流水号",
          key: "payFlowid",
          align: "center",
          fixed: "center",
          minWidth: 150
        }
      ],
      data: [],
      exportData: [],
      total: 0
    };
  },
  methods: {
    init() {
      this.requestOrderList();
    },
    changePage(v) {
      this.searchForm.current = v;
      this.requestOrderList();
    },
    changePageSize(v) {
      this.searchForm.size = v;
      this.requestOrderList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    requestOrderList() {
      // 多条件搜索用户列表
      // if (this.searchForm.start instanceof Date) {
      //   this.searchForm.start = dayjs(this.searchForm.start).format(
      //     "YYYY-MM-DD"
      //   );
      // }
      // if (this.searchForm.end instanceof Date) {
      //   this.searchForm.end = dayjs(this.searchForm.end).format("YYYY-MM-DD");
      // }
      this.loading = true;
      getOrderPageList(this.searchForm).then(res => {
        this.loading = false;
        console.log("getOrderList", res);
        if (res.code == 0) {
          // 将true和false转换为字符串的true和false
          this.data = res.data.records;
          this.total = res.data.total;
          console.log("oversee this.data", this.data);
        }
      });
    },
    handleSearch() {
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.requestOrderList();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.current = 1;
      this.searchForm.size = 20;
      this.searchForm.start = "";
      this.searchForm.end = "";
      // 重新加载数据
      this.requestOrderList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.requestOrderList();
    },
    payStatusFormat(status) {
      return getPayStatus(status);
    },
    payStatusColorFormat(status) {
      return getPayStatusColor(status);
    },
    payMethodFormat(method) {
      if (method == 1) {
        return "success";
      } else if (method == 2) {
        return "primary";
      } else if (method == 3) {
        return "error";
      } else {
        return "default";
      }
    },
    payMethodColorFormat(method) {
      if (method == 1) {
        return "微信";
      } else if (method == 2) {
        return "支付宝";
      } else if (method == 3) {
        return "银联";
      } else {
        return "其他";
      }
    },
    handleDropdown(name) {
      if (name == "refresh") {
        this.requestOrderList();
      } else if (name == "reset") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要重置密码的用户");
          return;
        }
        this.$refs.checkPass.show();
      } else if (name == "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "用户数据"
            });
          }
        });
      } else if (name == "exportAll") {
        this.operatorModalVisible = true;
      } else if (name == "importData") {
        this.$Modal.info({
          title: "请获取完整版",
          content: "支付链接: http://xpay.exrick.cn/pay?xboot"
        });
      }
    },
    exportAll() {
      getAllUserData().then(res => {
        this.operatorModalVisible = false;
        if (res.success) {
          this.exportData = res.result;
          setTimeout(() => {
            this.$refs.exportTable.exportCsv({
              filename: "用户全部数据"
            });
          }, 1000);
        }
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
